<script setup>
import {reactive, ref} from "vue";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";

let data = reactive(({
  // 所有的表单数据由它装入
  form:{
    // positionId: 0,
  },
  total:0,
  // 员工信息列表
  staffList : [] ,
  // 所有公司列表
  businessList : [] ,
  // 是否添加员工记录
  isAddStaff:false,
}));
/**
 * 查询所有的员工信息
 */
const queryAll = () => {
  console.log("开始查询所有的员工信息")
  console.log("传递的参数为"+JSON.stringify(data.form))
  // http://localhost:8080
  uu.post("/workingPersonnel/pageList",data.form).then(result =>{
    data.staffList = result.data.list;
    data.form.pageNum = result.data.pageNum;
    data.form.pageSize = result.data.pageSize;
    data.total = result.data.total;
    console.log("接收到的数据为"+JSON.stringify(result.data));
  })
}
queryAll()
/*
  改变页数
 */
const pagesChange = (value) => {
  // alert(value)
  //  console.log(value)
  data.pages = value;
  queryAll();
}
/*
  删除员工记录
 */
const delBusiness = (id) => {
  // alert(data.form.claimReportId)
  if (id != null){
    uu.delete("/workingPersonnel/remove",{
      params:{
        id : id,
      }
    }).then(result =>{
      // alert(result.message)
      if (result.ok){
        data.success = true; // 显示成功提示
        ElMessage({
          message:result.message,
          type:"success",
        })
        // 关闭对话框
        data.dialogDelVisible = false;
        // 清楚数据
        data.form = {}
        // 刷新页面
        queryAll()
      }else {
        ElMessage.error(result.message)// 显示失败提示
      }
    })
  }else {
    ElMessage.error("删除员工记录失败，传入方法的id为空")// 显示失败提示
  }

}
/*
  关闭添加删除对话框
 */
const handleClose = () => {
  data.form={}; // 清除数据
  data.dialogVisible=false // 关闭对话框
  // 清除残留验证规则信息，让下次打开不会有上次的残留信息
  ruleFormRef.value.resetFields();
}
/*
  开启添加删除对话框
 */
const dialogBox = (isAdd,id) => {
   queryBusiness() //查询所有的公司信息
  // 展开对话框
  data.dialogVisible = true;
  if (isAdd === false){ // 此为修改对话框
    if (id != null){
      console.log("修改员工信息对话框展开")
      // 根据id获取用户数据
      uu.get("/workingPersonnel/getById/"+id).then(result =>{
        data.form = result.data;
        console.log("获取的员工详细记录为"+JSON.stringify(data.form))
      })
      // 因为请求发送之后会刷新页面，所以这里就把 data.form 的值进行清空，以免带有自己不想要的值去执行queryAll()方法
      data.form = {}
    }else {
      ElMessage.error("获取具体员工记录时失效，传入方法的id为空")// 显示失败提示
    }
  }else if (isAdd === true){ // 此为添加对话框
    console.log("添加员工信息对话框展开")
  }
  // 将值传递到视图，然后视图判断要显示那些文字， 以及提交时调用那个方法。
  data.isAdd = isAdd;
}
/**
 * 添加员工记录
 */
const save = (ruleFormRef) => {
  // 重置验证规则，因为子对话框关闭之后再次到达主对话框可能会导致验证规则残留
  // ruleFormRef.resetFields();
  // ruleFormRef 代表验证规则
  if (!ruleFormRef) return; // 为空就结束，直观效果就是不允许点击
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      // alert(JSON.stringify(data.form))
      uu.post("/workingPersonnel/add",data.form).then(result => {
        if (result.ok) {
          data.dialogVisible = false; // 关闭添加对话框
          //   需要补上 增加成功的提示
          ElMessage({
            message: result.message,
            type: "success",
          })
        } else {
          ElMessage.error(result.message)
        }
        /*
            清除残留验证规则信息，让下次打开不会有上次的残留信息
            特别注意，ref的东西，在外部引用要加value，内部不用加，
            例如这里的参数就有 ruleFormRef ，所以就不用加value，否则就会出现未定义的错误。
         */
        ruleFormRef.resetFields();
        data.from = {}; // 清楚已有缓存，因为其他区域也在使用该对象数据。
        // 重新刷新页面
        queryAll()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 修改员工记录
 */
const handleEdit = (ruleFormRef) => {
  /*
      validate() 表单验证方法，用于验证规则是否被满足
      valid 表示验证的结果  fields 包含验证失败的错误信息
   */
  ruleFormRef.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      uu.put("/workingPersonnel/update",data.form).then(result =>{
        // data.success = result.ok;
        if (result.ok){
          ElMessage({
            message:result.message,
            type:"success"
          })
          //   清除缓存
          data.form = {}
          //   刷新页面
          queryAll()
          //   关闭对话框
          data.dialogVisible = false;
        }else {
          ElMessage.error(result.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
/**
 * 查询所有的公司信息
 */
const queryBusiness = () => {
  // data.businessList = []
  uu.get("/hupCompany/queryAllCompany").then(result =>{
    data.businessList = result.data;
    console.log("所有的公司信息为"+JSON.stringify(result.data));
  })
}

// 添加保单验证规则
const ruleFormRef = ref(); // 引用表单组件
const rules = reactive({  // 验证规则对象，存储验证规则。
  name: [
    { required: true, message: '请填写员工名称', trigger: 'blur' },
  ],
  companyId: [
    { required: true, message: '请选择分公司ID', trigger: 'change' },
  ],
  positionId: [
    { type: 'radio', required: true, message: '请选择职位', trigger: 'change' },
  ],
  contactNumber: [
    { required: true, message: '请填写联系电话', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请填写员工email', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请填写员工地址', trigger: 'blur' },
  ],
  remark: [
    { required: true, message: '请填写备注信息', trigger: 'blur' },
  ],
  lossTime: [
    { type:'date', required: true, message: '请选择出险时间', trigger: 'change' },
  ],
})
</script>

<template>
  <!-- 顶部区域 -->
  <el-form :inline="true" :model="data.form" class="demo-form-inline" style="width: 100%">
    <!-- 便捷查询区域-->
    <div>
      <el-form-item label="企业名称">
        <el-input v-model="data.form.name"  placeholder="请输入员工名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll()">报案信息查询</el-button>
      </el-form-item>
    </div>
    <!-- 添加按钮区域 -->
    <div>
      <!-- 开启添加对话框(增加或修改)==》员工记录 -->
      <el-form-item>
        <el-button type="success" @click="dialogBox(isAdd=true,null)">添加员工信息</el-button>
      </el-form-item>
      <!-------------------------------- 对话框操作数据(增加或修改) -------------------------------->
      <el-dialog
          v-model="data.dialogVisible"
          :title="data.isAdd?'增加报案信息':'修改报案信息'"
          width="40%"
          :before-close="handleClose"
          draggable
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <!-- 对话款数据区域 -->
        <el-form
            :model="data.form"
            ref="ruleFormRef"
            :rules="rules"
            label-width="140px">
          <el-form-item label="员工名称" prop="name">
            <el-input style="width:240px" v-model="data.form.name" />
          </el-form-item>
          <el-form-item label="所属公司" prop="companyId">
            <el-select
                v-model="data.form.companyId"
                placeholder="请选择所属公司"
                filterable
                remote
                reserve-keyword
                remote-show-suffix>
              <el-option v-for="item in data.businessList"  :label="item.name"  :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="positionId">
            <el-radio-group v-model="data.form.positionId">
              <el-radio :label=0  >未知</el-radio>
              <el-radio :label=1  >未知</el-radio>
              <el-radio :label=2  >调度</el-radio>
              <el-radio :label=3  >查勘</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactNumber">
            <el-input style="width:240px" v-model="data.form.contactNumber" />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input style="width:240px" v-model="data.form.email" />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input style="width:240px" v-model="data.form.address" />
          </el-form-item>
          <el-form-item label="备注信息" prop="remark">
            <el-input style="width:240px" v-model="data.form.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary"  @click="data.isAdd?save(ruleFormRef):handleEdit(ruleFormRef)">
          提交
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>

  </el-form>
  <!-- 员工信息表格区域 -->
  <el-table :data="data.staffList" border style="width: 100%; " >
    <el-table-column label="序号" type="index" fixed width="80" height="100" />
    <el-table-column label="员工名称" prop="name" fixed width="200" height="100" />
    <!--  这里需要查询到所有公司之后，再根据id来判断它是那一个  -->
    <el-table-column label="所属公司" prop="company.name" width="270" />
    <el-table-column label="职位" prop="positionId" width="120" >
      <template #default="scope">
        <el-text :label="0" v-model="scope.row.positionId" v-if=" scope.row.positionId ===0">未知</el-text>
        <el-text :label="1" v-model="scope.row.positionId" v-else-if=" scope.row.positionId ===1">未知</el-text>
        <el-text :label="2" v-model="scope.row.positionId" v-else-if=" scope.row.positionId ===2">调度</el-text>
        <el-text :label="3" v-model="scope.row.positionId" v-else-if=" scope.row.positionId ===3">查勘</el-text>
      </template>
    </el-table-column>
    <el-table-column label="联系电话" prop="contactNumber" width="120" />
    <el-table-column label="邮箱" prop="email" width="230" />
    <el-table-column label="地址" prop="address" width="220" />
    <el-table-column label="备注" prop="remark" width="220" />
    <el-table-column label="操作" fixed="right" width="150" >
      <template #default="scope">
        <!-- 点击开启对话框
                 -->
        <el-button
            @click="dialogBox(false,scope.row.id)"
            size="small"
            type="warning"
        >修改
        </el-button>
        <el-popconfirm @confirm="delBusiness(scope.row.id)" title="你确定要删除吗？">
          <template #reference>
            <el-button size="small" type="danger" :plain="true">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <div style="width: 100%">
    <br>
    <el-pagination
        v-model:current-page="data.form.pageNum"
        v-model:page-size="data.form.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="disabled"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="pagesChange($event)"
        @current-change="pagesChange($event)"
    />
  </div>
</template>

<style scoped>

</style>